<!--
 * @Author: your name
 * @Date: 2022-11-21 10:58:45
 * @LastEditTime: 2022-12-10 04:45:05
 * @LastEditors: DESKTOP-4QFD9PO
 * @Description: In User Settings Edit
 * @FilePath: \ClothMes\src\components\pageTabelLayout.vue
-->
<template>
    <a-spin :loading="loading" tip="加载中" dot style="height:100%;width: 100%;z-index:99999 ;">
    <div class="page-table-layout" ref="layoutRef">
        <div ref="headerdiv" class="table-page-header">
            <slot name="pageHeader"></slot>
        </div>
        <div class="gang">
        </div>
        <div class="table-page-body" :style="{height: pData.tableHeight+'px'}">
            <slot name="pageTabel"></slot>
        </div>
        <slot>
            
        </slot>
    </div>
    </a-spin>
</template>
<script lang="ts">
import { onMounted, reactive, ref ,toRefs} from 'vue';
import emitter from '@/hooks/useEventBus'
export default {
    name: 'pageTabelLayout',
    props:['loadings'],
    setup(props:any){
        const loading =computed(()=>{
            return props.loadings
        })
        const pData = reactive<{tableHeight:number}>({
            tableHeight:0
        })
        const reCountHeight = ()=>{
            
            setTimeout(()=>{
                nextTick(()=>{
                    if(layoutRef.value !== undefined && headerdiv.value !== undefined){
                    pData.tableHeight = layoutRef.value?.clientHeight - headerdiv.value?.clientHeight
                } else {
                    pData.tableHeight = 150
                }
                })
                },100)
        }
        const headerdiv = ref<HTMLDivElement>()
        const layoutRef = ref<HTMLDivElement>()
        onMounted(()=>{
            emitter.on('window-change',()=>{
                setTimeout(()=>{
                nextTick(()=>{
                    if(layoutRef.value !== undefined && headerdiv.value !== undefined){
                    pData.tableHeight = layoutRef.value?.clientHeight - headerdiv.value?.clientHeight
                } else {
                    pData.tableHeight = 150
                }
                })
                },100)
             
            })
            setTimeout(()=>{
                nextTick(()=>{
                    if(layoutRef.value !== undefined && headerdiv.value !== undefined){
                pData.tableHeight = layoutRef.value?.clientHeight - headerdiv.value?.clientHeight
             } else {
                pData.tableHeight = 150
             }
                })
            },100)
          
        })
      
        return{
            pData,
            headerdiv,
            layoutRef,
            loading,
            reCountHeight
        }
    }
}
</script>
<style lang="less"> 
    .page-table-layout{
        height:100%;overflow: hidden;
        background-color: white;

        width: 100%;
        display: flex;
        box-sizing: border-box;
        flex-direction: column;
        height: 100%;
        & >.table-page-header{
            flex-shrink: 0;
            box-sizing: border-box;
        }
        &  >.table-page-body{
            padding: 10px;
            box-sizing: border-box;
        }
    }

</style>